<template>
  <div>
    <el-page-header @back="goBack" content="编辑方案"></el-page-header>
    <div class="fromBox">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="方案名称">
          <el-input type="text" placeholder="请输入内容" v-model="form.schemes_title" show-word-limit > </el-input>
        </el-form-item>
        <el-form-item label="危机类别">
          <el-select v-model="form.crisis_type" placeholder="请选择危机类别">
            <el-option v-for="item in this.optionList.crisis_type" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="危机程度">
          <el-select v-model="form.crisis_degree" placeholder="请选择危机程度">
            <el-option v-for="item in this.optionList.crisis_degree" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影响范围">
          <el-select v-model="form.influence_range" placeholder="请选择影响范围">
            <el-option v-for="item in this.optionList.influence_range" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="涉事情况">
          <el-select v-model="form.site_conditions" placeholder="请选择涉事情况">
            <el-option v-for="item in this.optionList.site_conditions" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <h3>各阶段工作人员工作要点</h3>
        <div v-for="(item, index) in this.phaseList" :key="item.id" >
          <el-form-item label="阶段名称">
            <el-col :span="6">
              <el-input type="text" placeholder="请输入内容" v-model="item.phase_title" show-word-limit > </el-input>
            </el-col>
            <el-col :span="10" :offset="1">
              <el-button v-if="index === 0" type="primary" circle icon="el-icon-plus" @click="addPhaseFn"></el-button>
              <el-button type="info" circle icon="el-icon-top" @click="upBtn(index)"></el-button>
              <el-button type="info" circle icon="el-icon-bottom" @click="downBtn(index)"></el-button>
              <el-button v-if="index !== 0" type="danger" circle icon="el-icon-close" @click="removePhaseFn(index)"></el-button>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-button type="primary" icon="el-icon-plus" @click="addPersonnelFn(item.id)">上传人员</el-button>
            </el-row>
            <br>
            <el-table :data="item.phase_user" v-loading="tableConfig.load" :style="tableConfig.style" :max-height="tableConfig.maxHeight" :border=tableConfig.border :size="tableConfig.size" :key="Math.random()">
              <template v-for="(item, index) of tableConfig.config">
                <el-table-column v-if="item.id === 'json_url'" :key="index" :prop="item.id" :label="item.name" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
                  <template slot-scope="scope">
                    <el-link v-for="n of scope.row.json_url" :key="n.response.data.file_name + n.response.data.url" type="primary" :href="n.response.data.url">{{n.response.data.file_name}}</el-link>
                  </template>
                </el-table-column>
                <el-table-column v-else-if="item.id === 'operation'" :key="index" :prop="item.id" :label="item.name" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
                  <template slot-scope="scope"> <el-button v-for="n in item.list" :key="n.id" @click="examine(scope.row, n.id, scope.$index)" type="text" size="small" :class="n.className">{{n.name}}</el-button> </template>
                </el-table-column>
                <el-table-column v-else :label="item.name" :key="index" :prop="item.id" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :type="item.type"></el-table-column>
              </template>
            </el-table>
            <!-- <simple-table :tableConfig="tableConfig" :tableData="item.phase_user" @operation="getOperation"></simple-table> -->
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
      <add-personnel v-if="isAddPersonnel" :isAddPersonnel="this.isAddPersonnel" :id="this.id" @noAddPersonnel="noAddPersonnel"></add-personnel>
      <edit-personnel v-if="isEditPersonnel" :isEditPersonnel="this.isEditPersonnel" :e="this.e" @noEditPersonnel="noEditPersonnel"></edit-personnel>
    </div>
  </div>
</template>
<script>
import {APICRISISGETSCHEMESYSTEMLIST, APICRISISMODIFYSCHEMEINFO, APICRISISGETSCHEMEDETAIL} from '@/common/api.js'
import simpleTable from '@/components/table.vue'
import addPersonnel from './addPersonnel.vue'
import editPersonnel from './editPersonnel.vue'
export default {
  components: {
    simpleTable,
    addPersonnel,
    editPersonnel
  },
  data () {
    return {
      form: {
        schemes_title: '',
        crisis_type: '',
        site_conditions: '',
        influence_range: '',
        crisis_degree: '',
        phase: []
      },
      optionList: {},
      phaseList: [
        {id: 'phase1', phase_title: '', phase_user: []}
      ],
      id: '',
      e: {},
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: false,
        border: true,
        config: [
          {id: 'phase_user', name: '人员'},
          {id: 'content', name: '工作内容'},
          {id: 'json_url', name: '附件'},
          {id: 'operation', name: '操作', list: [{id: 'edit', name: '编辑'}, {id: 'up', name: '上移'}, {id: 'down', name: '下移'}, {id: 'del', name: '删除', className: 'dangerTextBtn'}]}
        ]
      },
      isAddPersonnel: false,
      isEditPersonnel: false
    }
  },
  created () {
    this.selectFn()
    this.getList()
  },
  methods: {
    goBack () {
      this.$router.push({path: '/crisis'})
    },
    getList () {
      APICRISISGETSCHEMEDETAIL({
        scheme_id: this.$route.query.id
      }).then((res) => {
        this.form.schemes_id = res.data.schemes_id
        this.form.schemes_title = res.data.schemes_title
        this.form.crisis_degree = res.data.crisis_degree.id
        this.form.crisis_type = res.data.crisis_type.id
        this.form.site_conditions = res.data.site_conditions.id
        this.form.influence_range = res.data.influence_range.id
        this.phase = res.data.phases
        this.phaseList = []
        res.data.phases.forEach((item, index) => {
          var obj = item
          obj.id = 'phase' + (index + 1)
          this.phaseList.push(obj)
        })
        this.phaseList.forEach(item => {
          item.phase_user.forEach(n => {
            n.id = item.id
          })
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    selectFn () {
      APICRISISGETSCHEMESYSTEMLIST().then((res) => {
        this.optionList = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    onSubmit () {
      this.form.phase = this.phaseList
      APICRISISMODIFYSCHEMEINFO(this.form).then((res) => {
        this.$message.success(res.msg)
        this.$router.push({path: '/crisis'})
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    examine (rows, id, index) {
      this.getOperation({rows: rows, id: id, index: index})
    },
    getOperation (e) {
      this.phaseList.forEach(item => {
        if (e.rows.id === item.id) {
          if (e.id === 'up') {
            if (e.index === 0) {
              return
            }
            // 在上一项插入该项
            item.phase_user.splice(e.index - 1, 0, (item.phase_user[e.index]))
            // 删除后一项
            item.phase_user.splice(e.index + 1, 1)
          } else if (e.id === 'down') {
            if (e.index === (item.phase_user.length - 1)) {
              return
            }
            // 在下一项插入该项
            item.phase_user.splice(e.index + 2, 0, (item.phase_user[e.index]))
            // 删除前一项
            item.phase_user.splice(e.index, 1)
          } else if (e.id === 'del') {
            item.phase_user.splice(e.index, 1)
          } else if (e.id === 'edit') { // 编辑
            console.log(e)
            this.editPersonnelFn(e)
          }
        }
      })
    },
    addPhaseFn () {
      var i = this.phaseList.length + 1
      this.phaseList.push({id: 'phase' + i, phase_title: '', phase_user: []})
    },
    removePhaseFn (index) {
      this.phaseList.splice(index, 1)
    },
    upBtn (index) {
      if (index === 0) {
        return
      }
      // 在上一项插入该项
      this.phaseList.splice(index - 1, 0, (this.phaseList[index]))
      // 删除后一项
      this.phaseList.splice(index + 1, 1)
    },
    downBtn (index) {
      if (index === (this.phaseList.length - 1)) {
        return
      }
      // 在下一项插入该项
      this.phaseList.splice(index + 2, 0, (this.phaseList[index]))
      // 删除前一项
      this.phaseList.splice(index, 1)
    },
    addPersonnelFn (id) {
      this.id = id
      this.isAddPersonnel = true
    },
    noAddPersonnel (val) {
      this.isAddPersonnel = false
      if (val) {
        this.phaseList.forEach(item => {
          if (val.val.id === item.id) {
            item.phase_user.push(val.val)
          }
        })
      }
    },
    editPersonnelFn (e) {
      this.e = e
      this.isEditPersonnel = true
    },
    noEditPersonnel (val) {
      this.isEditPersonnel = false
      if (val) {
        this.phaseList.forEach(item => {
          if (val.val.id === item.id) {
            item.phase_user[val.index] = val.val
          }
        })
      }
    }
  }
}
</script>
